<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声景体验 - 古韵新境</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ink: '#333333',
                        cinnabar: '#c41e3a',
                        rice: '#f5f2ea',
                        lightink: '#666666',
                        paper: '#f9f6f0',
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif'],
                        sans: ['"Noto Sans SC"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .soundscape-card {
                transition: all 0.4s ease;
            }
            .soundscape-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
            }
            .audio-wave span {
                display: inline-block;
                width: 3px;
                height: 8px;
                margin: 0 1px;
                background-color: #c41e3a;
                border-radius: 3px;
                animation: wave 1s infinite ease-in-out;
            }
        }
    </style>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');
        
        /* 滚动动画 */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 波形动画 */
        @keyframes wave {
            0%, 100% {
                height: 8px;
            }
            50% {
                height: 24px;
            }
        }
        
        .audio-wave span:nth-child(2) { animation-delay: 0.1s; }
        .audio-wave span:nth-child(3) { animation-delay: 0.2s; }
        .audio-wave span:nth-child(4) { animation-delay: 0.3s; }
        .audio-wave span:nth-child(5) { animation-delay: 0.4s; }
        .audio-wave span:nth-child(6) { animation-delay: 0.5s; }
        .audio-wave span:nth-child(7) { animation-delay: 0.4s; }
        .audio-wave span:nth-child(8) { animation-delay: 0.3s; }
        .audio-wave span:nth-child(9) { animation-delay: 0.2s; }
        .audio-wave span:nth-child(10) { animation-delay: 0.1s; }
    </style>
</head>

<body class="bg-rice text-ink font-sans">
    <!-- 导航栏 -->
    <header id="main-nav" class="fixed top-0 left-0 w-full z-50 transition-all duration-500 py-4">
        <div class="container mx-auto px-4 md:px-8 flex justify-between items-center">
            <!-- Logo -->
            <a href="index.html" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                    <span class="text-rice font-kai text-xl">古</span>
                </div>
                <span class="text-xl md:text-2xl font-song font-bold">古韵新境</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="font-song hover:text-cinnabar transition-colors duration-300">首页</a>
                <a href="poems.html" class="font-song hover:text-cinnabar transition-colors duration-300">诗境</a>
                <a href="classics.html" class="font-song hover:text-cinnabar transition-colors duration-300">典籍</a>
                <a href="interactive.html" class="font-song text-cinnabar border-b-2 border-cinnabar pb-1">互动</a>
                <a href="about.html" class="font-song hover:text-cinnabar transition-colors duration-300">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-2 rounded-full hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105">
                    登录 / 注册
                </button>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="mobile-menu-btn" class="md:hidden text-ink focus:outline-none">
                <i class="fa fa-bars text-2xl"></i>
            </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-paper shadow-lg absolute top-full left-0 w-full">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="index.html" class="font-song py-2 hover:text-cinnabar transition-colors">首页</a>
                <a href="poems.html" class="font-song py-2 hover:text-cinnabar transition-colors">诗境</a>
                <a href="classics.html" class="font-song py-2 hover:text-cinnabar transition-colors">典籍</a>
                <a href="interactive.html" class="font-song py-2 text-cinnabar">互动</a>
                <a href="about.html" class="font-song py-2 hover:text-cinnabar transition-colors">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-2 rounded-full hover:bg-opacity-90 transition-all">
                    登录 / 注册
                </button>
            </div>
        </div>
    </header>

    <main class="pt-24 pb-16">
        <!-- 路径导航 -->
        <section class="container mx-auto px-4 mb-8 text-sm text-lightink scroll-reveal">
            <a href="index.html" class="hover:text-cinnabar transition-colors">首页</a>
            <span class="mx-2"><i class="fa fa-angle-right"></i></span>
            <a href="interactive.html" class="hover:text-cinnabar transition-colors">互动</a>
            <span class="mx-2"><i class="fa fa-angle-right"></i></span>
            <span>声景体验</span>
        </section>
        
        <!-- 声景体验标题区 -->
        <section class="container mx-auto px-4 mb-16">
            <div class="bg-paper rounded-2xl overflow-hidden shadow-sm scroll-reveal">
                <div class="relative h-80 md:h-96">
                    <img src="https://picsum.photos/id/175/1920/1080" alt="声景体验背景" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-ink/90 via-ink/50 to-transparent flex flex-col justify-end p-8 md:p-12">
                        <h1 class="text-3xl md:text-5xl font-song font-bold text-rice mb-4">诗之声景</h1>
                        <p class="text-rice/90 max-w-2xl text-lg md:text-xl">聆听诗词意境，感受声音中的古典世界，让文字与声效共舞</p>
                    </div>
                </div>
                
                <!-- 主播放器 -->
                <div class="p-8 md:p-10 bg-paper">
                    <div class="flex flex-col md:flex-row items-center md:items-start gap-6">
                        <div class="w-full md:w-1/3">
                            <div class="relative rounded-xl overflow-hidden shadow-md">
                                <img src="https://picsum.photos/id/29/600/600" alt="静夜思声景" class="w-full aspect-square object-cover">
                                <div class="absolute inset-0 bg-gradient-to-t from-ink/70 to-transparent flex items-end">
                                    <div class="p-6">
                                        <span class="bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">推荐</span>
                                        <h3 class="text-xl font-song font-bold text-rice mt-2">静夜思 · 声景</h3>
                                        <p class="text-rice/80 text-sm">李白 · 唐代</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="w-full md:w-2/3">
                            <h2 class="text-2xl font-song font-bold mb-6">床前明月光，疑是地上霜</h2>
                            <p class="font-kai text-ink/80 text-lg mb-8">
                                床前明月光，疑是地上霜。举头望明月，低头思故乡。
                            </p>
                            
                            <!-- 音频控制 -->
                            <div class="bg-rice p-6 rounded-xl">
                                <div class="flex items-center mb-6">
                                    <button id="main-play-btn" class="w-14 h-14 rounded-full bg-cinnabar text-rice flex items-center justify-center mr-6 hover:bg-opacity-90 transition-colors">
                                        <i class="fa fa-play text-2xl"></i>
                                    </button>
                                    <div>
                                        <div class="audio-wave mb-2">
                                            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                                        </div>
                                        <p id="play-status" class="text-lightink">点击播放《静夜思》声景体验</p>
                                    </div>
                                </div>
                                
                                <div class="mb-4">
                                    <div class="flex justify-between text-sm text-lightink mb-2">
                                        <span>00:00</span>
                                        <span>03:45</span>
                                    </div>
                                    <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                                        <div class="h-full bg-cinnabar rounded-full w-1/4"></div>
                                    </div>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center space-x-6">
                                        <button class="text-ink hover:text-cinnabar transition-colors">
                                            <i class="fa fa-step-backward"></i>
                                        </button>
                                        <button class="text-ink hover:text-cinnabar transition-colors">
                                            <i class="fa fa-pause"></i>
                                        </button>
                                        <button class="text-ink hover:text-cinnabar transition-colors">
                                            <i class="fa fa-step-forward"></i>
                                        </button>
                                    </div>
                                    <div class="flex items-center space-x-6">
                                        <button class="text-ink hover:text-cinnabar transition-colors">
                                            <i class="fa fa-volume-up"></i>
                                        </button>
                                        <button class="text-ink hover:text-cinnabar transition-colors">
                                            <i class="fa fa-repeat"></i>
                                        </button>
                                        <button class="text-ink hover:text-cinnabar transition-colors">
                                            <i class="fa fa-random"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 声景分类 -->
        <section class="container mx-auto px-4 mb-12">
            <div class="flex overflow-x-auto pb-4 scrollbar-hide gap-3 mb-8 scroll-reveal">
                <button class="bg-cinnabar text-rice px-6 py-2 rounded-full whitespace-nowrap">全部声景</button>
                <button class="bg-paper text-ink px-6 py-2 rounded-full whitespace-nowrap hover:bg-gray-200 transition-colors">思乡主题</button>
                <button class="bg-paper text-ink px-6 py-2 rounded-full whitespace-nowrap hover:bg-gray-200 transition-colors">山水田园</button>
                <button class="bg-paper text-ink px-6 py-2 rounded-full whitespace-nowrap hover:bg-gray-200 transition-colors">边塞风光</button>
                <button class="bg-paper text-ink px-6 py-2 rounded-full whitespace-nowrap hover:bg-gray-200 transition-colors">爱情相思</button>
                <button class="bg-paper text-ink px-6 py-2 rounded-full whitespace-nowrap hover:bg-gray-200 transition-colors">咏史怀古</button>
                <button class="bg-paper text-ink px-6 py-2 rounded-full whitespace-nowrap hover:bg-gray-200 transition-colors">哲理感悟</button>
            </div>
        </section>
        
        <!-- 声景列表 -->
        <section class="container mx-auto px-4 mb-16">
            <h2 class="text-2xl font-song font-bold mb-8 text-center scroll-reveal">推荐声景</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 声景1 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm soundscape-card scroll-reveal">
                    <div class="relative h-48">
                        <img src="https://picsum.photos/id/110/600/400" alt="望庐山瀑布声景" class="w-full h-full object-cover">
                        <div class="absolute top-3 right-3 bg-cinnabar/90 text-rice w-10 h-10 rounded-full flex items-center justify-center hover:bg-cinnabar transition-colors play-btn">
                            <i class="fa fa-play"></i>
                        </div>
                        <div class="absolute top-3 left-3 bg-ink/70 text-rice text-sm px-3 py-1 rounded-full">3:12</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">望庐山瀑布 · 声景</h3>
                        <p class="text-lightink text-sm mb-4">李白 · 唐代</p>
                        <p class="font-kai text-ink/80 text-sm mb-4">
                            日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-lightink text-sm mr-4"><i class="fa fa-headphones mr-1"></i> 1.2k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 328</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                加入列表
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 声景2 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm soundscape-card scroll-reveal">
                    <div class="relative h-48">
                        <img src="https://picsum.photos/id/137/600/400" alt="江雪声景" class="w-full h-full object-cover">
                        <div class="absolute top-3 right-3 bg-cinnabar/90 text-rice w-10 h-10 rounded-full flex items-center justify-center hover:bg-cinnabar transition-colors play-btn">
                            <i class="fa fa-play"></i>
                        </div>
                        <div class="absolute top-3 left-3 bg-ink/70 text-rice text-sm px-3 py-1 rounded-full">2:45</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">江雪 · 声景</h3>
                        <p class="text-lightink text-sm mb-4">柳宗元 · 唐代</p>
                        <p class="font-kai text-ink/80 text-sm mb-4">
                            千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-lightink text-sm mr-4"><i class="fa fa-headphones mr-1"></i> 986</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 256</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                加入列表
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 声景3 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm soundscape-card scroll-reveal">
                    <div class="relative h-48">
                        <img src="https://picsum.photos/id/142/600/400" alt="水调歌头声景" class="w-full h-full object-cover">
                        <div class="absolute top-3 right-3 bg-cinnabar/90 text-rice w-10 h-10 rounded-full flex items-center justify-center hover:bg-cinnabar transition-colors play-btn">
                            <i class="fa fa-play"></i>
                        </div>
                        <div class="absolute top-3 left-3 bg-ink/70 text-rice text-sm px-3 py-1 rounded-full">4:30</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">水调歌头 · 声景</h3>
                        <p class="text-lightink text-sm mb-4">苏轼 · 宋代</p>
                        <p class="font-kai text-ink/80 text-sm mb-4">
                            明月几时有？把酒问青天。不知天上宫阙，今夕是何年。
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-lightink text-sm mr-4"><i class="fa fa-headphones mr-1"></i> 1.8k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 512</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                加入列表
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 声景4 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm soundscape-card scroll-reveal">
                    <div class="relative h-48">
                        <img src="https://picsum.photos/id/164/600/400" alt="春夜喜雨声景" class="w-full h-full object-cover">
                        <div class="absolute top-3 right-3 bg-cinnabar/90 text-rice w-10 h-10 rounded-full flex items-center justify-center hover:bg-cinnabar transition-colors play-btn">
                            <i class="fa fa-play"></i>
                        </div>
                        <div class="absolute top-3 left-3 bg-ink/70 text-rice text-sm px-3 py-1 rounded-full">3:20</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">春夜喜雨 · 声景</h3>
                        <p class="text-lightink text-sm mb-4">杜甫 · 唐代</p>
                        <p class="font-kai text-ink/80 text-sm mb-4">
                            好雨知时节，当春乃发生。随风潜入夜，润物细无声。
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-lightink text-sm mr-4"><i class="fa fa-headphones mr-1"></i> 1.5k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 387</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                加入列表
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 声景5 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm soundscape-card scroll-reveal">
                    <div class="relative h-48">
                        <img src="https://picsum.photos/id/188/600/400" alt="登鹳雀楼声景" class="w-full h-full object-cover">
                        <div class="absolute top-3 right-3 bg-cinnabar/90 text-rice w-10 h-10 rounded-full flex items-center justify-center hover:bg-cinnabar transition-colors play-btn">
                            <i class="fa fa-play"></i>
                        </div>
                        <div class="absolute top-3 left-3 bg-ink/70 text-rice text-sm px-3 py-1 rounded-full">2:15</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">登鹳雀楼 · 声景</h3>
                        <p class="text-lightink text-sm mb-4">王之涣 · 唐代</p>
                        <p class="font-kai text-ink/80 text-sm mb-4">
                            白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-lightink text-sm mr-4"><i class="fa fa-headphones mr-1"></i> 1.1k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 293</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                加入列表
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 声景6 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm soundscape-card scroll-reveal">
                    <div class="relative h-48">
                        <img src="https://picsum.photos/id/235/600/400" alt="相思声景" class="w-full h-full object-cover">
                        <div class="absolute top-3 right-3 bg-cinnabar/90 text-rice w-10 h-10 rounded-full flex items-center justify-center hover:bg-cinnabar transition-colors play-btn">
                            <i class="fa fa-play"></i>
                        </div>
                        <div class="absolute top-3 left-3 bg-ink/70 text-rice text-sm px-3 py-1 rounded-full">2:50</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">相思 · 声景</h3>
                        <p class="text-lightink text-sm mb-4">王维 · 唐代</p>
                        <p class="font-kai text-ink/80 text-sm mb-4">
                            红豆生南国，春来发几枝。愿君多采撷，此物最相思。
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-lightink text-sm mr-4"><i class="fa fa-headphones mr-1"></i> 2.3k</span>
                                <span class="text-lightink text-sm"><i class="fa fa-heart-o mr-1"></i> 645</span>
                            </div>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                加入列表
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多 -->
            <div class="text-center mt-12 scroll-reveal">
                <button id="load-more" class="border-2 border-ink text-ink px-8 py-3 rounded-full hover:bg-ink hover:text-rice transition-all duration-300 font-song">
                    加载更多 <i class="fa fa-refresh ml-2"></i>
                </button>
            </div>
        </section>
        
        <!-- 声景介绍 -->
        <section class="container mx-auto px-4 mb-16">
            <div class="bg-paper rounded-2xl p-8 md:p-10 scroll-reveal">
                <h2 class="text-2xl font-song font-bold mb-6">什么是诗之声景？</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                    <div>
                        <p class="text-ink/80 mb-4 leading-relaxed">
                            诗之声景是将古典诗词与环境音效相结合的沉浸式体验。我们邀请专业音效设计师，根据每首诗词的意境，精心打造与之匹配的声音环境。
                        </p>
                        <p class="text-ink/80 mb-4 leading-relaxed">
                            当您聆听《静夜思》的声景，会听到窗前明月下的虫鸣与微风；体验《望庐山瀑布》，则能感受到瀑布奔流的壮阔声响。
                        </p>
                        <p class="text-ink/80 leading-relaxed">
                            这种融合让您在阅读文字的同时，通过听觉进入诗人创作时的情境，获得更深刻的情感共鸣与理解。
                        </p>
                        
                        <button class="mt-6 bg-cinnabar text-rice px-6 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105">
                            了解更多 <i class="fa fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                    <div class="relative rounded-xl overflow-hidden h-64 md:h-80">
                        <img src="https://picsum.photos/id/190/800/600" alt="声景创作" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-ink text-rice py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                            <span class="text-rice font-kai text-xl">古</span>
                        </div>
                        <span class="text-xl font-song font-bold">古韵新境</span>
                    </div>
                    <p class="text-rice/70 mb-6">让古典文学活起来，用现代方式感受传统文化魅力</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-rice/70 hover:text-cinnabar transition-colors">首页</a></li>
                        <li><a href="poems.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗境</a></li>
                        <li><a href="classics.html" class="text-rice/70 hover:text-cinnabar transition-colors">典籍</a></li>
                        <li><a href="interactive.html" class="text-rice/70 hover:text-cinnabar transition-colors">互动体验</a></li>
                        <li><a href="about.html" class="text-rice/70 hover:text-cinnabar transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">互动功能</h4>
                    <ul class="space-y-3">
                        <li><a href="soundscape.html" class="text-rice/70 hover:text-cinnabar transition-colors">声景体验</a></li>
                        <li><a href="painting.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗画创作</a></li>
                        <li><a href="dialogue.html" class="text-rice/70 hover:text-cinnabar transition-colors">古今对话</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">用户作品</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">互动评论</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">contact@guyunxinjing.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">+86 123 4567 8910</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">北京市海淀区中关村大街1号</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-rice/20 pt-8 text-center text-rice/50 text-sm">
                <p>© 2023 古韵新境 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        $('#mobile-menu-btn').click(function() {
            $('#mobile-menu').toggleClass('hidden');
        });
        
        // 主播放器控制
        let isPlaying = false;
        $('#main-play-btn').click(function() {
            const icon = $(this).find('i');
            if (isPlaying) {
                // 暂停播放
                icon.removeClass('fa-pause').addClass('fa-play');
                $('#play-status').text('点击播放《静夜思》声景体验');
                isPlaying = false;
            } else {
                // 开始播放
                icon.removeClass('fa-play').addClass('fa-pause');
                $('#play-status').text('正在播放：《静夜思》声景体验');
                isPlaying = true;
            }
        });
        
        // 声景卡片播放按钮
        $('.play-btn').click(function() {
            // 停止主播放器
            $('#main-play-btn i').removeClass('fa-pause').addClass('fa-play');
            $('#play-status').text('点击播放《静夜思》声景体验');
            isPlaying = false;
            
            // 切换当前卡片播放状态
            const card = $(this).closest('.soundscape-card');
            const icon = $(this).find('i');
            
            if (icon.hasClass('fa-play')) {
                // 播放当前声景
                icon.removeClass('fa-play').addClass('fa-pause');
                $(this).addClass('bg-cinnabar');
            } else {
                // 暂停当前声景
                icon.removeClass('fa-pause').addClass('fa-play');
                $(this).removeClass('bg-cinnabar');
            }
        });
        
        // 滚动动画
        $(window).scroll(function() {
            $('.scroll-reveal').each(function() {
                const windowHeight = $(window).height();
                const elementTop = $(this).offset().top;
                const elementVisible = 150;
                
                if (elementTop < windowHeight - elementVisible) {
                    $(this).addClass('active');
                }
            });
        });
        
        // 初始触发一次滚动检查
        $(window).trigger('scroll');
        
        // 导航栏滚动效果
        $(window).scroll(function() {
            if ($(window).scrollTop() > 50) {
                $('#main-nav').addClass('bg-paper shadow-md py-2');
                $('#main-nav').removeClass('py-4');
            } else {
                $('#main-nav').removeClass('bg-paper shadow-md py-2');
                $('#main-nav').addClass('py-4');
            }
        });
        
        // 加载更多按钮
        $('#load-more').click(function() {
            $(this).html('<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...');
            // 模拟加载延迟
            setTimeout(() => {
                $(this).html('加载更多 <i class="fa fa-refresh ml-2"></i>');
                alert('已加载全部声景');
            }, 1500);
        });
    </script>
</body>
</html>